<template>
    <login-layout>
        <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="登录" name="login">
                <el-form :model="form.login" :rules="rules" ref="login" label-width="100px" status-icon>
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="form.login.username" auto-complete="off" placeholder="账号 / 邮箱 / 手机号码"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.login.password" auto-complete="off" placeholder="密码"/>
                    </el-form-item>
                    <el-form-item>
                        <el-alert title="点击 登录 后，默认同意本站的使用协议" type="info" :closable="false"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitLogin()" :loading="loading.login">登录</el-button>
                        <el-button type="warning" @click="activeName='resetPassword'">忘记密码</el-button>
                    </el-form-item>
                    <el-form-item v-if="message.login.show">
                        <el-alert :title="message.login.content" :type="message.login.type"/>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="注册" name="register">
                <el-form :model="form.register" :rules="rules" ref="register" label-width="100px" status-icon>
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="form.register.username" auto-complete="off" placeholder="中文最少2位，英文最少4位"/>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="form.register.phone" auto-complete="off" placeholder="11位手机号码"/>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.register.email" placeholder="邮箱地址"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.register.password" auto-complete="off"
                                  placeholder="最少6位"/>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input type="password" v-model="form.register.checkPassword" auto-complete="off"
                                  placeholder="确认密码一致性"/>
                    </el-form-item>
                    <el-form-item>
                        <el-alert title="点击 注册 后，默认同意本站的使用协议" type="info" :closable="false"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitRegister()" :loading="loading.register">注册</el-button>
                    </el-form-item>
                    <el-form-item v-if="message.register.show">
                        <el-alert :title="message.register.content" :type="message.register.type"/>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="重置密码" name="resetPassword">
                <reset-password ref="resetPassword"/>
            </el-tab-pane>
            <el-tab-pane label="本站使用协议" name="agreement">
                {{agreement}}
            </el-tab-pane>
        </el-tabs>
    </login-layout>
</template>

<script>
    import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import ResetPassword from "../../component/component/reset-password";

    Vue.use(ElementUI);
    export default {
        components: {ResetPassword},
        data() {
            return {
                activeName: 'login',
                loading: {login: false, register: false},
                message: {
                    login: {type: 'error', content: '', show: false},
                    register: {type: 'error', content: '', show: false},
                },
                form: {
                    login: {
                        username: '',
                        password: '',
                    },
                    register: {
                        username: '',
                        phone: '',
                        email: '',
                        password: '',
                        checkPassword: '',
                    },
                },
                rules: {
                    username: [{
                        validator: (rule, value, callback) => {
                            value = value.trim();
                            if (value === '管理员' || value === '系统' || value === 'admin')
                                return callback(new Error('不允许使用这个字符'));

                            if (!value || value.length < 2)
                                return callback(new Error('最少输入两个字符'));
                            callback();
                        }, required: true, trigger: 'blue,change'
                    }],
                    phone: [{
                        validator: (rule, value, callback) => {
                            if (_.isEmpty(value))
                                return callback(new Error('请输入手机号码'));
                            if (/^1\d{10}$/.test(value))
                                return callback();
                            callback(new Error('请填写正确的手机号码'));
                        },
                        required: true, trigger: 'blue,change'
                    }],
                    email: [{required: true, type: 'email', message: '请填写正确的邮箱', trigger: 'blue,change'}],
                    password: [{
                        validator: (rule, value, callback) => {
                            if (_.isEmpty(value))
                                callback(new Error('请输入密码'));
                            else if (value.length < 6)
                                callback(new Error('密码最少6位'));
                            else
                                callback();
                        },
                        required: true, trigger: 'blue,change'
                    }],
                    checkPassword: [{
                        validator: (rule, value, callback) => {
                            if (_.isEmpty(value))
                                callback(new Error('请输入密码'));
                            if (value !== this.data.form.register.password)
                                callback(new Error('两个密码不一致'));
                            else
                                callback();
                        },
                        required: true, trigger: 'blue, change'
                    }],
                },
            };
        },
        methods: {
            getForm(name) {
                const _csrf = document.cookie.match(/csrftoken=([\S]+)/i)[1];
                if (name === 'login')
                    return Object.assign({_csrf}, this.form.login);
                return Object.assign({_csrf}, this.form.register);
            },
            submitLogin() {
                this.$refs['login'].validate(valid => {
                    if (!valid) return;
                    this.loading.login = true;
                    this.message.login.show = false;
                    this.$http.post('/login', this.getForm('login')).then(res => {
                        this.message.login.show = true;
                        this.message.login.content = '登录成功，请稍后';
                        this.message.login.type = 'success';
                        setTimeout(() => {
                            window.location.reload();
                        }, 1500);
                    }).catch(err => {
                        this.loading.login = false;
                        this.message.login.show = true;
                        this.message.login.content = err.response.data;
                        this.message.login.type = 'error';
                    });
                });
            },
            submitRegister() {
                this.$refs['register'].validate((valid) => {
                    if (!valid) return;
                    this.loading.register = true;
                    this.message.register.show = false;
                    this.$http.post('/register', this.getForm('register')).then(res => {
                        this.message.register.show = true;
                        this.message.register.content = '注册成功，请稍后';
                        this.message.register.type = 'success';
                        setTimeout(() => {
                            this.activeName = 'login';
                        }, 1500);
                    }).catch(err => {
                        this.loading.register = false;
                        this.message.register.show = true;
                        this.message.register.content = err.response.data;
                        this.message.register.type = 'error';
                    });
                });
            },
        },
        watch: {
            activeName(val) {
                if (val === 'resetPassword') {
                    this.$refs['resetPassword'].active();
                }
            }
        },
    }
</script>